<template>
  <div class="home">
    <el-row>
      <el-col :span="24">
        <header class="header">
          <div class="header-left">
            <el-avatar :src="user.avatar" size="large" />
            <div class="welcome-message">
              <div class="greeting">{{ greetingMessage }}</div>
              <div class="username">今天开工的工单信息</div>
            </div>
          </div>
        </header>
      </el-col>
    </el-row>

    <el-row class="content" gutter="20">
      <el-col :span="24" :xs="24" :sm="24" :md="24" :lg="6">
        <div>
          <DeviceStatusView class="product-info-container" />
        </div>
        <div>
          <AlarmExceptionView style="height: 52vh; margin-bottom: 10px" />
        </div>
      </el-col>

      <el-col :span="24" :xs="24" :sm="24" :md="24" :lg="18">
        <el-row class="main-content" gutter="20">
          <el-col :span="24">
            <el-card shadow="hover" style="height: 32vh">
              <template #header> 累计生产 </template>
              <ProductionDataView />
            </el-card>
          </el-col>
        </el-row>

        <el-row class="main-content" gutter="20">
          <el-col :span="24">
            <el-card shadow="hover" style="height: 38vh">
              <template #header> 累计完成 </template>
              <WorkOrderDataView />
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElAvatar } from 'element-plus'
import WorkOrderDataView from './EChartsview/WorkOrderDataView.vue'
import ProductionDataView from './EChartsview/ProductionDataView.vue'
import DeviceStatusView from './EChartsview/DeviceStatusView.vue'
import AlarmExceptionView from './EChartsview/AlarmExceptionView.vue'

const user = ref({
  name: '信号差',
  avatar: 'https://resourcesza.oss-cn-guangzhou.aliyuncs.com/portraits/2022082717582987.jpg'
})
const getGreetingMessage = () => {
  const hours = new Date().getHours()
  if (hours < 12) {
    return '早上好'
  } else if (hours < 18) {
    return '下午好'
  } else {
    return '晚上好'
  }
}

const messages = {
  morning: [
    '祝你有个美好的一天！',
    '愿你今天充满活力！',
    '希望你今天心情愉快！',
    '早晨的阳光照耀你的笑脸！',
    '新的一天，新的开始！',
    '迎接这美好的一天吧！',
    '早上好，记得吃早餐哦！',
    '今天的你比太阳还要闪亮！',
    '新的一天，新的你，早安！'
  ],
  afternoon: [
    '愿你下午愉快！',
    '希望你下午充满能量！',
    '祝你度过一个美好的下午！',
    '午后阳光温暖你的心情！',
    '享受这美好的下午时光！',
    '希望你午后的咖啡特别好喝！',
    '午饭后不要犯困哦！',
    '继续加油！',
    '希望你的午后小憩美梦成真！',
    '工作别忘了休息一下！',
    '午后的时光，适合追梦！'
  ],
  evening: [
    '祝你晚上愉快！',
    '愿你有个宁静的夜晚！',
    '希望你晚上放松心情！',
    '夜晚的星光点亮你的梦想！',
    '美好的夜晚属于你！',
    '祝你做个好梦，晚安！',
    '今天的你依旧闪亮！',
    '希望你的晚餐美味又丰盛！',
    '今晚追剧愉快！',
    '希望你今晚睡个好觉！',
    '夜深了，好好休息，明天继续精彩！',
    '夜晚好时光，放松享受吧！'
  ]
}

const getRandomMessage = () => {
  const hours = new Date().getHours()
  let timeOfDay

  if (hours < 12) {
    timeOfDay = 'morning'
  } else if (hours < 18) {
    timeOfDay = 'afternoon'
  } else {
    timeOfDay = 'evening'
  }

  const messageList = messages[timeOfDay]
  const randomIndex = Math.floor(Math.random() * messageList.length)
  return messageList[randomIndex]
}

const greetingMessage = computed(() => `${getGreetingMessage()} ${user.value.name}，${getRandomMessage()}`)
</script>

<style scoped>
.product-info-container {
  height: 18vh;
  margin-bottom: 10px;
}
.home {
  font-family: 'Roboto', sans-serif;
  color: #333;
}

.header {
  display: flex;
  justify-content: space-between;
  background-color: #ffffff;
  align-items: center;
  padding: 10px 20px;
  color: #333;
  margin-bottom: 20px;
  height: 80px;
}

.header-left {
  display: flex;
  align-items: center;
}

.header-left .welcome-message {
  margin-left: 20px;
  line-height: 1.2;
}

.greeting {
  font-size: 1.2rem;
  font-weight: bold;
  color: #353535;
}

.username {
  margin-top: 8px;
  font-size: 0.9rem;
  color: #858484;
}

.main-content,
.content {
  margin-bottom: 10px;
}

/* Responsive design for smaller screens */
@media (max-width: 767px) {
  .header {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    padding: 10px;
  }
  .product-info-container {
    height: 28vh;
  }
  .header-left {
    flex-direction: column;
    align-items: flex-start;
  }

  .welcome-message {
    margin-left: 0;
  }

  .main-content .el-card {
    height: auto;
  }
}

@media (max-height: 900px) {
  .product-info-container {
    height: 22vh;
  }
}
</style>
